<template>
  <el-table
      ref="examList"
      :data="examList"
      highlight-current-row
      style="width: 100%"
  >
    <el-table-column type="index" width="50" />
    <el-table-column property="examName" label="考试标题" width="180" />
    <el-table-column property="examStartTime" label="开始时间" width="180" />
    <el-table-column property="examEndTime" label="结束时间" width="180" />
    <el-table-column property="examScore" sortable label="考试总分" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row)"
        >修改</el-button
        >
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row)"
        >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
<!--  <el-footer>-->
<!--    <el-pagination background layout="prev, pager, next" :total="1000" />-->
<!--  </el-footer>-->

  <el-dialog title="修改考试信息" v-model="showEdit">
      <el-form
          ref="formRef"
          :model="formInfo"
          :rules="rules"
          label-position="top"
          size="large"
          status-icon
      >
        <el-form-item label="考试标题" prop="examName">
          <el-input v-model="formInfo.examName" />
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="20">
            <el-form-item label="考试开始时间" prop="examTime">
              <el-date-picker
                  v-model="formInfo.examTime"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="选择考试开始时间"
                  end-placeholder="选择考试结束时间"
                  @blur="jisuan"
              />
            </el-form-item>
          </el-col>
<!--          <el-col :span="4">-->
<!--            <el-form-item required label="考试总时长">-->
<!--              <el-input disabled v-model="shi" />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </el-row>
        <el-form-item required label="考试描述"></el-form-item>
        <div style="width: 100%;">
          <Editor  :locale="zhHans" :value="formInfo.examDesc" @change="handleChange" />
        </div>
      </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showEdit = false">取消</el-button>
        <el-button type="primary" @click="editList">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import zhHans from 'bytemd/locales/zh_Hans.json';
import {Editor} from "@bytemd/vue-next";

export default {
  components: {Editor},
  data() {
    return {
      zhHans,
      examList: [],
      showEdit: false,
      formInfo: {
        examDesc: "",
        examTime: [],
        examName: null,
      },
      rules: {
        examName: [
          { required: true, message: "请输入考试标题", trigger: "blur" }
        ],
        examTime: [
          { required: true, message: "请选择考试时间", trigger: "blur" }
        ]
      },
      success: false,
      shi: "0分钟",
    }
  },
  created() {
    this.getExamList()
  },
  methods: {
    handleChange(val){
      this.formInfo.examDesc = val
    },
    jisuan(){
      // 计算考试时长
      if (this.formInfo.examTime[0] && this.formInfo.examTime[1]) {
        let shi = this.formInfo.examTime[1].getTime() - this.formInfo.examTime[0].getTime()
        this.shi = shi / 1000 / 60 + "分钟"
      }
    },
    getExamList() {
      this.$request.get("/exam/list").then((res) => {
        if (res.code === 0) {
          this.examList = res.data
        }
      })
    },
    handleEdit(row){
      this.$request.get("/exam/info?id=" + row.examId).then((res) => {
        if (res.code === 0) {
          this.formInfo.examDesc = res.data.examDesc
          this.formInfo.examName = res.data.examName
          this.formInfo.examTime[0] = res.data.examStartTime
          this.formInfo.examTime[1] = res.data.examEndTime
          this.jisuan()
        }
      })
      this.showEdit = true
    },
    handleDelete(row){
      this.$request.delete("/exam/delete",{
        id: row.examId
      }).then((res) => {
        if (res.code === 0) {
          this.$message({
            message: "删除成功",
            type: "success"
          });
        }
      })
    },
    editList(){
      this.$refs["formRef"].validate((valid) => {
        if (valid) {
          this.$request.put("/exam/update",{
            examName: this.formInfo.examName,
            examStartTime: this.formInfo.examTime[0],
            examEndTime: this.formInfo.examTime[1],
            examDesc: this.formInfo.examDesc,
          }).then((res) => {
            if (res.code === 0) {
              this.$message({
                message: "修改成功",
                type: "success"
              })
            }
            this.showEdit = false;
            this.getExamList();
          })
        }
      })
    }
  },
}
</script>

<style scoped>

</style>
